{% block sw_product_variants_configurator_restrictions %}
<div class="sw-product-variants-configurator-restrictions">

    {% block sw_product_variants_configurator_restrictions_search %}
    <div class="sw-product-variants-configurator-restrictions__search">
        {% block sw_product_variants_configurator_restrictions_search_field %}
        <sw-simple-search-field
            v-model:value="term"
            size="small"
            variant="form"
            :placeholder="$tc('sw-product.variations.configuratorModal.searchRestrictions')"
        />
        {% endblock %}

        {% block sw_product_variants_configurator_restrictions_buttons %}
        <mt-button
            ghost
            size="small"
            variant="secondary"
            @click="addEmptyRestrictionCombination"
        >
            {{ $tc('sw-product.variations.configuratorModal.addNewRestriction') }}
        </mt-button>
        {% endblock %}
    </div>
    {% endblock %}

    {% block sw_product_variants_configurator_restrictions_grid_wrapper %}
    <div class="sw-product-variants-configurator-restrictions__grid-wrapper">
        {% block sw_product_variants_configurator_restrictions_data_grid %}
        <sw-data-grid
            v-if="product.variantRestrictions"
            ref="swDataGrid"
            :data-source="filteredRestrictions"
            :columns="restrictionColumns"
            :show-selection="false"
            :compact-mode="false"
            full-page
        >

            {% block sw_product_variants_configurator_restrictions_data_grid_column_id %}
            <template
                #column-id="{ item, isInlineEdit, compact }"
            >
                <template
                    v-for="restriction in getRestrictionsWithNaming(item.id).values"
                    :key="restriction.id"
                >
                    <span
                        class="sw-product-variants-configurator-restrictions__group-name"
                    >
                        {{ restriction.group }}:
                    </span>
                    <sw-label
                        v-for="option in restriction.options"
                        :key="option.id"
                        ghost
                    >
                        {{ option }}
                    </sw-label>
                </template>
            </template>
            {% endblock %}

            {% block sw_product_variants_configurator_restrictions_data_grid_actions %}
            <template
                #actions="{ item }"
            >
                {% block sw_product_variants_configurator_restrictions_data_grid_actions_items %}
                <sw-context-menu-item @click="editRestrictionCombination(item)">
                    {{ $tc('sw-product.variations.configuratorModal.editRestriction') }}
                </sw-context-menu-item>

                <sw-context-menu-item
                    variant="danger"
                    @click="deleteRestrictionCombination(item)"
                >
                    {{ $tc('sw-product.variations.configuratorModal.deleteRestriction') }}
                </sw-context-menu-item>
                {% endblock %}
            </template>
            {% endblock %}
        </sw-data-grid>
        {% endblock %}
    </div>
    {% endblock %}

    {% block sw_product_variants_configurator_restrictions_modal %}
    <sw-modal
        v-if="restrictionModalIsOpen"
        :title="$tc('sw-product.variations.configuratorModal.singleRestrictionAddTitle')"
        class="sw-product-variants-configurator-restrictions__modal"
        @modal-close="cancelAddRestriction"
    >

        {% block sw_product_variants_configurator_restrictions_modal_main %}
        <div class="sw-product-variants-configurator-restrictions__modal-main">
            {% block sw_product_variants_configurator_restrictions_modal_main_restriction_selection %}
            <sw-product-restriction-selection
                v-for="(restriction, index) in actualRestriction.values"
                :key="restriction.id"
                :groups-with-options="groupsWithOptions"
                :restriction="restriction"
                @restriction-delete="deleteRestriction"
            >

                <template #contentAfter>
                    <p
                        v-if="index < actualRestrictionValueLength - 1"
                        class="sw-product-variants-configurator-restrictions__seperator"
                    >
                        {{ $tc('sw-product.variations.configuratorModal.singleRestrictionSeperation') }}
                    </p>
                </template>
            </sw-product-restriction-selection>
            {% endblock %}

            {% block sw_product_variants_configurator_restrictions_modal_main_button_new_restriction %}
            <mt-button
                class="sw-product-variants-configurator-restrictions__button-new-restriction"
                variant="secondary"
                @click="addEmptyRestriction"
            >
                {{ $tc('sw-product.variations.configuratorModal.singleRestrictionSeperation') }}
            </mt-button>
            {% endblock %}
        </div>
        {% endblock %}

        {% block sw_product_variants_configurator_restrictions_modal_footer %}
        <template #modal-footer>
            {% block sw_product_variants_configurator_restrictions_modal_footer_cancel %}
            <mt-button
                size="small"
                variant="secondary"
                @click="cancelAddRestriction"
            >
                {{ $tc('global.default.cancel') }}
            </mt-button>
            {% endblock %}
            {% block sw_product_variants_configurator_restrictions_modal_footer_save_add_restriction %}
            <mt-button
                variant="primary"
                size="small"
                @click="saveAddRestriction"
            >
                {{ $tc('sw-product.variations.configuratorModal.save') }}
            </mt-button>
            {% endblock %}
        </template>
        {% endblock %}
    </sw-modal>
    {% endblock %}

    {% block sw_product_variants_configurator_restrictions_loader %}
    <sw-loader v-if="isLoading" />
    {% endblock %}

</div>
{% endblock %}
